{extend name="table"}

{block name="button"}
<!--{if auth("add")}-->
<button class='layui-btn layui-btn-sm layui-btn-primary' data-open='{:url("add")}'>添加批次</button>
<!--{/if}-->
{/block}

{block name="content"}
<div class="think-box-shadow">
    {include file='source/assign/index-search'}
    <table id="BatchData" data-line="2" data-url="{:sysuri()}" data-target-search="form.form-search"></table>
</div>

<script>
    $(function () {
        // 初始化表格组件
        var $table = $('#BatchData').layTable({
            even: true, height: 'full',
            sort: {field: 'id', type: 'desc'},
            cols: [[
                {field: 'id', hide: true},
                {checkbox: true, fixed: true},
                {field: '', title: '关联批次', align: 'left', width: '25%', templet: '#tpl1'},
                {field: '', title: '关联分区', align: 'left', width: '35%', templet: '#tpl2'},
                {field: '', title: '创建时间', align: 'center', minWidth: 175, templet: '#tpl3'},
                /* {if auth('edit') || auth('auto')} */
                {toolbar: '#toolbar', title: '操作面板', align: 'center', minWidth: 160, fixed: 'right'},
                /* {/if} */
            ]]
        });

        // 数据状态切换操作
        layui.form.on('switch(StatusSwitch)', function (obj) {
            var data = {id: obj.value, status: obj.elem.checked > 0 ? 1 : 0};
            $.form.load("{:url('state')}", data, 'post', function (ret) {
                ret.code > 0 ? $table.trigger('reload') : $.msg.error(ret.info, 3, function () {
                    $table.trigger('reload');
                });
                return false;
            }, false);
        });
    });
</script>

<script type="text/html" id="tpl1">
    赋码批次：{{d.batch}}<br>
    物码批次：{{d.cbatch}}

    {{# if(d.coder.type===1){ }}
    <span class="layui-badge layui-bg-blue">前关联</span>
    {{# }else{ }}
    <span class="layui-badge layui-bg-green">后关联</span>
    {{# } }}

</script>

<script type="text/html" id="tpl2">
    <div class="layui-badge layui-badge-middle layui-bg-cyan code-range-icon pull-left">{{ d.range.length }}</div>
    <div class="nowrap"><b>产品：</b>{{ d.range[0].gname }} # {{ showSpec(d.range[0].gspec) }}</div>
    <div class="nowrap"><b>分区：</b><b>{{ d.range[0].range_start }}</b> - <b>{{ d.range[0].range_after }}</b> # {{ d.range[0].gcode }}</div>
</script>

<script type="text/html" id="tpl3">
    <div class="padding-top-10"></div>
    {{d.create_time}}
</script>

<script type="text/html" id="toolbar">
    <!--{if auth('edit')}-->
    <a class="layui-btn layui-btn-sm" data-open='{:url("edit")}?id={{d.id}}'>编 辑</a>
    <!--{/if}-->
    <!--{if auth('unlock')}-->
    <a class="layui-btn layui-btn-sm layui-btn-normal" data-load='{:url("unlock")}?batch={{d.batch}}'>解 锁</a>
    <!--{/if}-->
</script>

<style>
    .code-range-icon {
        width: 30px;
        height: 30px;
        cursor: pointer;
        padding: 0;
        display: inline-block;
        margin-top: 5px;
        text-align: center;
        line-height: 30px !important;
        border-radius: 50%;
    }
</style>
{/block}